<template >
  <div ref="app" class="h-full w-full bg-gray-100">
    <full-page-view></full-page-view>
  </div>
</template>
<script setup>
const app = ref();

const state = useStorage('device', 'desktop');

const debouncedFn = useDebounceFn((entries) => {
  const entry = entries[0];
  const { width } = entry.contentRect;
  if (width < 1024) {
    state.value = 'mobile';
  } else {
    state.value = 'desktop';
  }
}, 800);

useResizeObserver(app, debouncedFn);

provide('device', state);

</script>

<style scoped>
#app{
}
</style>
